<template>
    <div>
        <div>
            <el-card>
                <el-form class="searchForm" size="mini" label-width="100px">
                    <el-form-item label="租户名称">
                        <el-input
                                style="width: 200px"
                                v-model="searchData.name"
                                placeholder="请输入用户名称"
                        ></el-input>
                    </el-form-item>
                    <div class="searchBtn">
                        <el-button type="primary" size="small" @click="keywordSearch"><i class="el-icon-search"></i> 搜索</el-button>
                        <el-button type="info" size="small" @click="clean"><i class="el-icon-delete"></i> 清空</el-button>
                    </div>
                </el-form>
                <el-button class="btn" type="primary" size="small" @click="addDialogVisible = true"><i class="el-icon-plus"></i> 新增租户</el-button>

                <div>
                    <el-table
                            :data="tenantData"
                            height="450"
                            border
                            style="width: 100%"
                            :cell-style="{ 'text-align': 'center' }"
                            :header-cell-style="{ 'text-align': 'center' }"
                    >
                        <el-table-column type="index" label="编号" width="50"></el-table-column>
                        <el-table-column prop="name" label="租户名称"   ></el-table-column>
                        <el-table-column prop="code" label="租户代码" ></el-table-column>
                        <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
                        <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
                        <el-table-column label="状态" prop="status" width="80">
                            <template slot-scope="scope">
                                <el-tag>{{scope.row.status == '0' ? '正常' : '冻结'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-link
                                        type="primary"
                                        class="btn"
                                        icon="el-icon-edit"
                                        @click="editTenantOpen(scope.row)"
                                >编辑
                                </el-link
                                >
                                <el-link
                                        type="danger"
                                        class="btn"
                                        icon="el-icon-delete"
                                        @click="removeTenant(scope.row)"
                                >删除
                                </el-link
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            :total="pagingData.total"
                            background
                            layout="total,sizes, prev, pager, next"
                            :page-size="pagingData.size"
                            :page-sizes="[1, 5, 10, 20, 30, 50]"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagingData.current"
                    ></el-pagination>

                    <el-dialog title="新增租户" :before-close="handleClose" :visible.sync="addDialogVisible" width="50%">
                        <el-form :model="tenantForm" label-position="left" label-width="100px" size="small">
                            <el-form-item label="租户名称">
                                <el-input v-model="tenantForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="租户代码">
                                <el-input v-model="tenantForm.code"></el-input>
                            </el-form-item>
                            <el-form-item label="有效时间">
                                <el-date-picker
                                        v-model="times"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="addTenant">确 定</el-button>
						</span>
                    </el-dialog>

                    <el-dialog title="编辑租户" :before-close="handleClose" :visible.sync="editDialogVisible" width="50%">
                        <el-form :model="tenantForm" label-position="left" label-width="100px" size="small">
                            <el-form-item label="租户名称">
                                <el-input v-model="tenantForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="租户代码">
                                <el-input v-model="tenantForm.code"></el-input>
                            </el-form-item>
                            <el-form-item label="有效时间">
                                <el-date-picker
                                        v-model="times"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-radio-group v-model="tenantForm.status">
                                    <el-radio label="0" border>正常</el-radio>
                                    <el-radio label="1" border>冻结</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="editDialogVisible = false,init()">取 消</el-button>
							<el-button size="mini" type="primary" @click="editTenant">确 定</el-button>
						</span>
                    </el-dialog>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {findAllTenant, addTenant, updateTenant, deleteTenant} from "../../../api/admin/permissions/tenant"
    import moment from "moment"

    export default {
        name: "tenant",
        data() {
            return {
                searchData: {
                    name: '',
                    startDate: '',
                    endDate: ''
                },
                times: '',
                tenantData: [],
                // 分页数据
                pagingData: {
                    current: 1,
                    total: 0,
                    size: 20,
                },
                addDialogVisible: false,
                editDialogVisible: false,
                tenantForm: {
                    name: '',
                    code: '',
                    startTime: '',
                    endTime: '',
                    status: ''
                }
            }
        },
        created() {
            this.init()
        },
        methods: {
            /**
             * 初始化/更新
             */
            init() {
                let search = {
                    ...this.searchData,
                    total: this.pagingData.total,
                    size: this.pagingData.size,
                    current: this.pagingData.current,
                }
                findAllTenant(search).then(res => {
                    this.tenantData = res.data.data.records;
                    this.pagingData.total = res.data.data.total
                    this.pagingData.size = res.data.data.size
                    this.pagingData.current = res.data.data.current
                })
            },
            /**
             * 根据搜索条件查询租户
             */
            keywordSearch() {
                this.init();
            },
            /**
             * 新增租户
             */
            addTenant() {
                this.tenantForm.startTime = moment(this.times[0]).format('YYYY-MM-DD HH:mm:ss');
                this.tenantForm.endTime = moment(this.times[1]).format('YYYY-MM-DD HH:mm:ss');
                addTenant(this.tenantForm).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('添加租户成功')
                        this.addDialogVisible = false;
                        this.init()
                    } else {
                        this.$message.error('添加租户失败')
                        this.addDialogVisible = false;
                    }
                })
            },
            /**
             * 打开编辑租户表单
             */
            editTenantOpen(row) {
                this.tenantForm = row;
                this.times = [row.startTime, row.endTime]
                this.editDialogVisible = true;
            },
            /**
             * 编辑租户
             */
            editTenant() {
                this.tenantForm.startTime = moment(this.times[0]).format('YYYY-MM-DD HH:mm:ss');
                this.tenantForm.endTime = moment(this.times[1]).format('YYYY-MM-DD HH:mm:ss');
                updateTenant(this.tenantForm).then(res => {
                    if (res.data.code == 200) {
                        this.editDialogVisible = false;
                        this.$message.success('修改租户成功')
                        this.init()
                    } else {
                        this.editDialogVisible = false;
                        this.$message.error('修改租户失败')
                    }

                })
            },
            /**
             * 删除用户
             */
            removeTenant(row) {
                this.$confirm('确定要删除该租户？', '警告', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    deleteTenant(row.id).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('删除租户成功')
                            this.init()
                        } else {
                            this.$message.error('删除租户失败')
                        }
                    })
                }).catch(action => {

                })
            },
            // 页码切换
            handleSizeChange(val) {
                this.pagingData.size = val
                this.keywordSearch()
            },
            // 当前页切换
            handleCurrentChange(val) {
                this.pagingData.current = val
                this.keywordSearch()
            },
            /**
             * 关闭编辑表单
             */
            handleClose(done) {
                this.init();
                done();
            },
            /**
             * 重置搜索框
             */
            clean() {
                this.searchData = {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/style/admin/permissions/user.scss";

    a.btn {
        margin: 0 5px !important;
    }
</style>
